<template>
  <g-lib-provider ref="libProviderRef" :lib="'zui'" :gray-key="'zui 渐进升级'" :gray-lib="'gui'">
    <div class='demo' :key="refreshKey">
    <g-card header="测试libProvider">
      <span v-if="$refs.libProviderRef">
        {{ $refs.libProviderRef.isGray ? '开' : '关' }}
      </span>
      <z-button @click="$refs.libProviderRef.fetchGray('./gray-open.json')">请求灰度接口（开）</z-button>
      <z-button @click="$refs.libProviderRef.fetchGray('./gray.json')">请求灰度接口（关）</z-button>
    </g-card>

    <g-card header="测试表格">
      <z-table
        v-update-cell-text
        :data="[{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]"
        style="width: 100%"
      >
        <z-table-column
          prop="date"
          label="日期"
          width="180">
        </z-table-column>
        <z-table-column
          prop="name"
          label="姓名"
          width="180">
        </z-table-column>
        <z-table-column
          prop="address"
          label="地址">
        </z-table-column>
      </z-table>

      <g-table height="500" ref="gTable" api="./test-api.json" :auto-fetch="true" :adapter="adapter" :columns="columns">
        <span slot="kcName">gggg</span>
        <span slot="kdgjUserMobile">wwww</span>
      </g-table>
    </g-card>
    <g-card :key="zButtonParentRandomKey" header="测试 webpack 配置">
      <z-button ref="zButtonAsync" @click="handleBtnAsyncImportClick">异步导入测试</z-button>
    </g-card>
    <g-card header="测试 form">
      <g-form
        ref="ruleForm"
        class="demo-ruleForm"
        inline
        label-suffix="："
        label-width="auto"
        :model="ruleForm"
        :rules="rules"
      >
        <g-form-item label="密码1234123213421341234" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item label="密码" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item label="密码" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item label="密码" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item label="密码" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item label="密码" prop="pass">
          <z-input type="password" v-model="ruleForm.pass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="确认密码" prop="checkPass">
          <z-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></z-input>
        </g-form-item>
        <g-form-item label="年龄" prop="age">
          <z-input v-model.number="ruleForm.age"></z-input>
        </g-form-item>
        <g-form-item>
          <z-button type="primary" @click="submitForm('ruleForm')">提交</z-button>
          <z-button @click="resetForm('ruleForm')">重置</z-button>
          <z-button @click="handleBtnAddFieldClick">增加字段</z-button>
        </g-form-item>
      </g-form>
    </g-card>
    <g-card header="测试 icon">
      <z-icon name="edit"/>
      <g-icon name="edit"/>
    </g-card>
    <g-card header="测试 zLink">
      <g-link icon="z-icon-edit" @click="handleLinkClick">
        我是链接
        <i slot="icon" class="z-icon-edit"></i>
      </g-link>
    </g-card>
    <g-card class="" header="测试栅格化布局">
      <g-row gutter="2" type="flex">
        <g-col :span="24"><div class="grid-content bg-purple-dark"></div></g-col>
      </g-row>
      <g-row gutter="2" type="flex">
        <g-col :span="24" :xs="12" :sm="16"><div class="grid-content bg-purple-dark"></div></g-col>
        <g-col :span="24" :xs="12" :sm="8"><div class="grid-content bg-purple-light"></div></g-col>
      </g-row>
      <g-row gutter="2" type="flex">
        <g-col :span="12" :push="2"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="12" :pull="4"><div class="grid-content bg-purple-light"></div></g-col>
      </g-row>
      <g-row gutter="2" type="flex">
        <g-col :span="8"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="8"><div class="grid-content bg-purple-light"></div></g-col>
        <g-col :span="8"><div class="grid-content bg-purple"></div></g-col>
      </g-row>
      <g-row gutter="2">
        <g-col :span="6"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="6"><div class="grid-content bg-purple-light"></div></g-col>
        <g-col :span="6"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="6"><div class="grid-content bg-purple-light"></div></g-col>
      </g-row>
      <g-row gutter="2">
        <g-col :span="4"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="4"><div class="grid-content bg-purple-light"></div></g-col>
        <g-col :span="4"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="4"><div class="grid-content bg-purple-light"></div></g-col>
        <g-col :span="4"><div class="grid-content bg-purple"></div></g-col>
        <g-col :span="4"><div class="grid-content bg-purple-light"></div></g-col>
      </g-row>
    </g-card>

    <g-card header="轮播图测试">
      <z-carousel trigger="click" type="card" height="200px">
        <z-carousel-item v-for="item in 4" :key="item">
          <z-image fit="fill" src="https://lf3-static.bytednsdoc.com/obj/eden-cn/hjeh7pldnulm/SemiDocs/bg-2.png"/>
        </z-carousel-item>
      </z-carousel>
    </g-card>

    <g-card header="测试 tag">
      <z-tag dot>标签一</z-tag>
      <g-tag dot>标签二</g-tag>
    </g-card>

    <g-card header="测试过渡动画">
      <c-collapse />
    </g-card>

    <g-card header="测试面包屑">
      <z-breadcrumb separator="/">
        <z-breadcrumb-item :to="{ path: '/' }">首页</z-breadcrumb-item>
        <z-breadcrumb-item><a href="/">活动管理</a></z-breadcrumb-item>
        <z-breadcrumb-item>活动列表</z-breadcrumb-item>
        <z-breadcrumb-item>活动详情</z-breadcrumb-item>
      </z-breadcrumb>
    </g-card>

    <g-card ref="testCardRef" header="测试徽章">
      <g-badge type="success" :value="badgeCnt">
        <g-button-group>
          <g-button type="success" @click="++badgeCnt">+</g-button>
          <g-button type="success" @click="--badgeCnt">-</g-button>
        </g-button-group>
      </g-badge>
    </g-card>

    <g-card header="测试布局容器">
      <g-container ref="gContainerRef">
        <g-header>Header</g-header>
        <g-main>Main</g-main>
        <g-footer>Footer</g-footer>
      </g-container>
    </g-card>

    <g-card header="测试 avatar">
      <z-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
      <g-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-left: 8px;" />
    </g-card>

    <g-card header="测试 alert" @update="refreshPage">
      <z-alert show-icon effect="light" title="zAlert 警告提示" type="info" close-text="已知晓">
        lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </z-alert>
      <g-alert style="margin-top: 8px;" show-icon effect="light" title="zAlert 警告提示" type="info" close-text="已知晓">
        lorem ipsum dolor sit amet, consectetur adipisicing elit.
      </g-alert>
    </g-card>

    <g-card header="测试 backtop">
      这里看不到组件，滚动页面到下方可以看见
      <z-backtop />
      <g-backtop left="280"/>
    </g-card>

    <g-card header="测试 $watermark">
      <z-button @click="() => $watermark.load({ userName: 'genggeng' })">开启水印 $watermark </z-button>
      <z-button @click="() => $watermark.remove({ userName: 'genggeng' })">关闭水印 $watermark </z-button>
      <g-button @click="() => $gWatermark.mount({ text: 'wenwen' })">开启 $gWatermark</g-button>
      <g-button @click="() => $gWatermark.unmount({ text: 'wenwen' })">关闭 $gWatermark</g-button>
    </g-card>

    <g-card header="测试 empty 组件">
      <z-empty>
        <template #description>
          description2222
        </template>
      </z-empty>
      <g-empty>
        <template #description>
          description2222
        </template>
      </g-empty>
    </g-card>

    <g-card header="测试 divider 组件">
      <z-divider content-position="center">
        <z-button>测试1</z-button>
        <z-divider direction="vertical" />
        <z-button>zDivider</z-button>
      </z-divider>
      <g-divider style="margin-top: 40px;" name="ggggg">
      <z-button>测试2</z-button>
      <g-divider direction="vertical" />
      <z-button>gDivider</z-button>
    </g-divider>
    </g-card>

    <g-card header="测试 button 案例">
      <g-button>我用来测试 data-v</g-button>
      <z-form>
        <z-form-item label="我是 zFormItem 的 label">
          <z-button-group>
            <z-button type="light-green" @click="handleBtnClick">zButton 按钮</z-button>
            <g-button icon="z-icon-search" type="light-pink" :throttle-delay="800"  @click="handleBtnClick">gButton 按钮</g-button>
          </z-button-group>
        </z-form-item>
      </z-form>
    </g-card>

    <g-card header="测试 message 案例">
      <test-message/>
    </g-card>

    <g-card header="测试 卡片案例">
      <test-card/>
    </g-card>

    <g-card header="测试气泡案例">
      <test-tooltip/>
    </g-card>

    <z-backtop :right="200" @click="refreshPage">刷</z-backtop>
  </div>
  </g-lib-provider>
</template>

<script>
import TestTooltip from "./components/test-tooltip.vue";
import TestCard from "examples/play/components/test-card.vue";
import TestMessage from "examples/play/components/test-message.vue";
import {rafThrottle} from "main/utils/util";
import CCollapse from "examples/play/components/cCollapse.vue";
import Vue from 'vue';

export default {
  components:{
    CCollapse,
    TestMessage,
    TestCard,
    TestTooltip
  },

  directives:{
    updateCellText: {
      bind(el, binding, vnode) {
        console.log('gggg bind', el, el.parent);
      },
      inserted(el, binding) {
        console.log('gggg inserted', el, el.parent)
      },
      update(el, binding) {
        console.log('gggg update', el, el.parent)
      },
      componentUpdated(el, binding) {
        console.log('gggg componentUpdated', el, el.parent)
      },
      unbind(el, binding) {
        console.log('gggg unbind', el, el.parent)
      }
    }
  },

  data() {
    const checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('年龄不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value < 18) {
            callback(new Error('必须年满18岁'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    return {
      async adapter({ api = '', params = {}, pageNum = 1, pageSize = 50 }) {
        const pager = {
          pageNum,
          pageSize
        }

        const { list: rows, total } = await fetch(api, { data: { ...pager } }).then(res => res.json())

        return { rows: rows.slice(3), total: Number(total) }
      },
      columns: [
        {
          label: '客户名称',
          prop: 'kcName',
          minWidth: 180,
          fixed: 'left',
          showSlot: true
        },
        {
          label: '客户手机号',
          prop: 'kdgjUserMobile',
          showSlot: true,
          minWidth: 150,
          fixed: 'left'
        },
        {
          label: '开通状态',
          prop: 'kcRefundStatusDesc',
          minWidth: 100
        },
        {
          label: '参与的活动',
          prop: 'kcTypeDesc',
          minWidth: 100
        },
        {
          label: '店铺总数',
          prop: 'bindShopNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '开通审核中店铺数',
          prop: 'bindShopOpeningNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '未开通的店铺数',
          prop: 'bindShopNotOpenedNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '已开通的店铺数',
          prop: 'bindShopOpenedNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '即将过期店铺数',
          prop: 'soonExpiredNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '已过期店铺数',
          prop: 'expiredNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '授权生效中的店铺数',
          prop: 'validShopNum',
          showSlot: true,
          minWidth: 130
        },
        {
          label: '活动电子面单',
          prop: 'openedEleAccountNum',
          showSlot: true,
          minWidth: 120
        },
        {
          label: '管家UserId',
          prop: 'kdgjUserId',
          minWidth: 120
        },
        {
          label: '客户编码',
          prop: 'crmCustomerCode',
          minWidth: 120
        },
        {
          label: '业务员',
          prop: 'fullEmp',
          minWidth: 150
        },
        { label: '网点', prop: 'fullSite', minWidth: 150 },
        {
          label: '所属管理中心',
          prop: 'siteManageAreaName',
          minWidth: 150
        },
        {
          label: '客户联系人',
          prop: 'contactName',
          minWidth: 150
        },
        {
          label: '联系人手机号',
          prop: 'contactPhone',
          showSlot: true,
          minWidth: 150
        },
        {
          label: '联系人职务',
          prop: 'contactMark',
          minWidth: 150
        },
        {
          label: '客户创建时间',
          prop: 'createTime',
          minWidth: 150
        },
        {
          label: '开通人姓名',
          prop: 'creatorName',
          minWidth: 150
        },
        {
          label: '开通人部门',
          prop: 'creatorDeptName',
          minWidth: 150
        },
        {
          label: '开通人网点',
          prop: 'creatorSiteName',
          minWidth: 150
        },
        {
          label: '开通人管理中心',
          prop: 'creatorManageAreaName',
          minWidth: 150
        },
        { label: '开通时间', prop: 'refundOpenTime', minWidth: 150 }
      ],

      zButtonParentRandomKey: Math.random(),
      refreshKey: 0,
      badgeCnt: 0,
      isShow: false,
      ruleForm: {
        pass: '',
        checkPass: '',
        age: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        age: [
          { validator: checkAge, trigger: 'blur' }
        ]
      }
    };
  },

  created() {
    //
  },

  methods: {
    handleBtnAsyncImportClick() {
      const btnEl = this.$refs.zButtonAsync.$el
      import('packages/button').then(({default: zButton}) => {
        new Vue({
          render: h => h(zButton, { on: { click: () => { this.zButtonParentRandomKey = Math.random() } } }, '我是你爹')
        }).$mount(btnEl.parentElement.children[btnEl.parentElement.children.length - 1])

        this.$message.warning('导入成功')
      })
    },

    handleBtnAddFieldClick() {
      this.$refs.ruleForm.$emit('el.form.addField', 'genggeng');
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    handleLinkClick() {
      console.log('ggg handleLinkClick');
    },

    handleBtnClick: rafThrottle(function () {
      console.log('click', typeof this.$el);
    }),

    refreshPage() {
      this.refreshKey = Math.random();
    }
  }
};
</script>

<style lang="scss">
.demo .z-main>.z-row{
  margin-bottom:20px;
}

.demo .z-container{
   border-bottom:1px dashed #ccc;
}
</style>

<style scoped lang="scss">
@import url('//at.alicdn.com/t/c/font_2887145_cmweab3xh4h.css');

.demo::v-deep {
  .z-card, .g-card {
    + .z-card, + .g-card {
      margin-top: 20px;
    }
  }

  .z-button--light-green {
    background-color: #6ebc65;
    border-color: #6ebc65;
    color: #fff;

    &:hover, &:focus {
      background-color: #5cb35c;
      border-color: #5cb35c;
      color: #fff;
    }
  }

  .z-button--light-pink {
    background-color: #ffb6c1; /* 骚粉色背景 */
    border-color: #ffb6c1;
    color: #fff;

    &:hover, &:focus {
      background-color: #ff80ab; /* 悬停或聚焦时背景颜色稍浅 */
      border-color: #ff80ab;
      color: #fff;
    }
  }

  .g-header, .g-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .g-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .z-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }

  .g-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }

  .z-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
}
</style>

